<!-- 今日订单 -->
<template>
    <view class="page bgf8">
        <status-bar title='今日订单' :goHome='fromShare'></status-bar>
        <view class="padding30 bgwhite">
            <view class="card bgwhite bor_radius_6 padding30">
                <view class="size34 color_11 bold">订单曲线</view>
                <line :raw-data="lineData"></line>
            </view>
            <view class="p-bot40 bor_bot_E8">
                <view class="size30 color_44 bold text-center m-top40 m-bot40">今日品类交易比</view>
                <ring :raw-data="ringData1"></ring>
            </view>
            <view class="p-bot40 bor_bot_E8">
                <view class="size30 color_44 bold text-center m-top40 m-bot40">今日地区交易比</view>
                <ring :raw-data="ringData2"></ring>
            </view>
        </view>
        <view class="p-bot30">
            <view class="d-flex j-sb a-center padding20-30 bgwhite">
                <view class="size34 color_11 bold">今日订单</view>
                <view @click="toUrl('/privatePage/client/order')">
                    <text class="size26 color_66 m-right10">全部</text>
                    <text class="iconfont icon-xiangyouxiayiye color_99"></text>
                </view>
            </view>
            <view v-if="list.length">
                <view class="order-item padding30 bgwhite m-bot10" v-for="(item,index) in list" :key="index">
                    <view class="d-flex j-sb a-center m-bot20">
                        <view class="size30 color_11">订单号: {{ item.order_code }}</view>
                        <view class="label" style="background: #FF6046;" v-if="item.state == 0">待备货</view>
                        <view class="label" style="background: #f9ae3d;" v-if="item.state == 1">待收货</view>
                        <view class="label" style="background: #3c9cff;" v-if="item.state == 2">待评价</view>
                        <view class="label" style="background: #5ac725;" v-if="item.state == 3">已完成</view>
                    </view>
                    <view class="d-flex j-sb a-center">
                        <view class="d-flex">
                            <image :src="$imgUrls(item.goods[0].img)" mode="aspectFill" class="img"></image>
                            <view class="p-left20 p-top16 p-bot16 d-flex f-column j-sb">
                                <view class="color_22">
                                    <text class="size26">购买人: {{ item.v_name }}</text>
                                    <!-- 手机号脱敏 -->
                                    <text class="size22 p-left22">{{ item.v_tel }}</text>
                                </view>
                                <view class="h6 color_77">购买时间: {{ item.add_time }}</view>
                            </view>
                        </view>
                        <view class="size34 color_FOD">￥{{ item.total }}</view>
                    </view>
                </view>
            </view>

            <view v-else class="bgwhite">
                <emptys empty="order"></emptys>
            </view>
        </view>
    </view>
</template>

<script>
import line from '../components/line'
import ring from '../components/ring'
export default {
    data(){
        return {
            fromShare: 0,
            lineData: {},
            ringData1: {},
            ringData2: {},
            list: []
        }
    },
    components: {
        line,
        ring
    },
    onLoad(){
        this.getLineData()
        this.getRingData(1)
        this.getRingData(2)
        this.getList()
    },
    methods: {
        getLineData(){
            this.$http.get({
                url: '/DiyApi/getStatisticsThisDay',
                data: {
                    type: 'order',
                    is_private: 1
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.lineData = res.data
            })
        },
        getRingData(num){
            this.$http.get({
                url: '/DiyApi/pieChart',
                data: {
                    type: 'order',
                    display_mode: num == 1 ? 'cate' : 'area',
                    is_private: 1
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this[`ringData${num}`] = res.data
            })
        },
        getList(){
            this.$http.get({
                url: '/PrivateSphereApi/todayInc',
                data: {
                    type: 'order',
                    is_private: 1
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.list = res.data || []
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.card {    
    border: 1px solid #DCDCDC;
}
.bor_bot_E8 {   
    border-bottom: 1px solid #E8E8E8;
}
.order-item {
    height: 230rpx;
    .img {
        width: 120rpx;
        height: 120rpx;
    }
    .label {
        width: 100rpx;
        line-height: 40rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #fff;
        letter-spacing: 2rpx;
    }
}
</style>